﻿@using QuocHoi_TV_Frontend.Models
@model List<QuocHoi_TV_Frontend.Models.CommentNew>

@{
    ViewBag.Title = "Detail";
    Layout = "~/Views/Shared/_Broadcast.cshtml";
    List<Category> lstCate = DataModels.getCateHaveVideo(10);   
    News oneVideo = ViewBag.video;
    List<CommentNew> lstComment = ViewBag.comment;
    int countComment = ViewBag.countComment;
    
}
<section class="main_section_video_area">
	<section class="left_ms_videos">
		<div class="title">
			TV VIDEOS - GIẢI TRÍ
		</div>
		<div class="boxquickfind">
				<select>
					<option>Chọn chuyên mục</option>
					<option value="Danh sách chuyên mục">Trang chủ</option>
                    @foreach (var item in lstCate)
                    {
                        <option value="@item.CateID">@item.CateName</option>    
                    }											
				</select>
		</div>
	</section>
	<section class="right_ms_videos">
		<div class="showvideo">
			<div class="monitor_tv">
				<video width="100%" height="450" id="player2" controls="controls" preload="none">
	                <!-- MP4 source must come first for iOS -->
	                <source type="video/mp4" src="http://seagames.radiovietnam.vn/Upload/11y/SeaGames27.mp4" />	                
	                <!-- Fallback flash player for no-HTML5 browsers with JavaScript turned off -->
	                <object width="640" height="360" type="application/x-shockwave-flash" data="/Content/mediaelement/flashmediaelement.swf"> 		
		                <param name="movie" value="/Content/mediaelement/flashmediaelement.swf" /> 
		                <param name="flashvars" value="controls=true&amp;file=http://seagames.radiovietnam.vn/Upload/11y/SeaGames27.mp4" /> 		
		                <!-- Image fall back for non-HTML5 browser with JavaScript turned off and no Flash player installed -->
		                
	                </object> 	
                </video>
			</div>
			<span>@oneVideo.NewsTitle</span>
		</div>
		<section class="sharelink">
            <input type="hidden" name="newsID" id="newsID" value="@oneVideo.NewsID" />
			<input id="tab-1" type="radio" name="radio-set" class="tab-selector-1" checked="checked" />
			<label for="tab-1" class="tab-label-1">Giới thiệu</label>
								
			<input id="tab-2" type="radio" name="radio-set" class="tab-selector-2" />
			<label for="tab-2" class="tab-label-2">chia sẻ</label>
								  
			<input id="tab-3" type="radio" name="radio-set" class="tab-selector-3" />
			<label for="tab-3" class="tab-label-3">mã nhúng</label>
								  
			<input id="tab-4" type="radio" name="radio-set" class="tab-selector-4" />
			<label for="tab-4" class="tab-label-4">Link</label>
			<div class="clear-shadow"></div>
			<div class="content_sharelink">
				<div class="content_aboutus">
					<h1>Đã xuất bản vào @DateTime.Parse(oneVideo.CreateDate.ToString()).ToString("dd-mm-yyyy")</h1>
					<p>@oneVideo.NewSub</p>
				</div>
				<div class="content_share">
					<div class="share-row" >
						<div class="side-block-holder">
							<div class="ttl-side">
								<h2>
									CHIA SẺ VIDEO
								</h2>
							</div>
							<p> Là người đầu tiên chia sẻ video này với tất cả bạn bè của bạn</p>
							<ul>
								<li>
									<a href="">
										<img src="/images/bgqhtv/icon_facebook.png" width="20" height="20">
									</a>
								</li>
								<li>
									<a href="">
										<img src="/images/bgqhtv/icon_twiter.png" width="20" height="20">
									</a>
								</li>
								<li>
									<a href="">
										<img src="/images/bgqhtv/icon_Google.png" width="20" height="20">
									</a>
								</li>
								<li>
									<a href="">
										<img src="/images/bgqhtv/icon_likedln.png" width="20" height="20">
									</a>
								</li>
							</ul>
						</div>
					</div>	
				</div>
				<div class="content_embed">
					<p> Code Mã nhúng</p>
					<div class="decor-txt-area">
						<form action="#">
							<textarea id="tvVideoEmbed" onclick="SelectAll('tvVideoEmbed');" rows="3" cols="30">
								<iframe frameborder="0" width="640" height="360" style="border:none;" src="http://www.channelnewsasia.com/starterkit/servlet/fragment?id=920444&view=embed"/>
							</textarea>
						</form>
					</div>
				</div>
				<div class="content_link">
					<p> url</p>
					<div class="url-row" >
						<input style="display:block;"id="tvVideoURL" class="txt-field" type="text" value="http://www.channelnewsasia.com/tv/tvshows/acrossborders/north-korea-china/920444.html" onclick="SelectAll('tvVideoURL');">
					</div>
				</div>
			</div>
		</section>
                
		<div class="comment_videos_area">
			<div class="my_comment">
				<span class="title">Tất cả bình luận</span>
				<span>(@countComment bình luận)</span>
				<div class="row">
					<div class="col1">
						<input id="txtName" type="text" style="width:213px;" value="" >
					</div>
					<div class="col2">
						<input id="txtEmail" type="text" style="width:213px;" value="" >
					</div>
				</div>
				<div class="row typer">
					<textarea id="txtComment" cols="20" rows="2" ></textarea>
				</div>
				<div class="sendcomment">
					<input id="comment_post_button" class="button btn_send_comment" type="button" value="Gửi">
				</div>
			</div>
            @if (Model.Count > 0)
            {
			    <div id="grid-list">									
                    @{ Html.RenderPartial("_ListComments", Model); }
			    </div>
            }
		</div>
      
	</section>
</section>
<script type="text/javascript">

    // using jQuery
    $('video,audio').mediaelementplayer(/* Options */);

    $(document).ready(function () {

        var watermarkName = 'Họ tên';
        var watermarkEmail = 'Email';
        var watermarkContent = 'Nội dung';

        //init, set watermark text and class
        $('#txtName').val(watermarkName);

        //if blur and no value inside, set watermark text and class again.
        $('#txtName').blur(function () {
            if ($(this).val().length == 0) {
                $(this).val(watermarkName);
            }
        });
        //if focus and text is watermrk, set it to empty and remove the watermark class
        $('#txtName').focus(function () {
            if ($(this).val() == watermarkName) {
                $(this).val('');
            }
        });
        
        $('#txtEmail').val(watermarkEmail);
        $('#txtEmail').blur(function () {
            if ($(this).val().length == 0) {
                $(this).val(watermarkEmail);
            }
        });
        $('#txtEmail').focus(function () {
            if ($(this).val() == watermarkEmail) {
                $(this).val('');
            }
        });

        $('#txtComment').val(watermarkContent);
        $('#txtComment').blur(function () {
            if ($(this).val().length == 0) {
                $(this).val(watermarkContent);
            }
        });
        $('#txtComment').focus(function () {
            if ($(this).val() == watermarkContent) {
                $(this).val('');
            }
        });
    });
    $('#comment_post_button').click(function () {
        var APIURL = "/Video/Comment";
        var newsid = $('#newsID').val();
        var name = $('#txtName').val();
        var email = $('#txtEmail').val();
        var comment = $('#txtComment').val();        
        
        $.ajax({
            type: "POST",
            url: APIURL,
            data: { 'newsID': newsid, 'name': name, 'email': email, 'content': comment },

            success: function (data) {
                window.location = "/News/Index";
            }
        });
    });
</script>